<template>
	<view>
		<nav-custom></nav-custom>
		<view class="flex padding justify-around tab-cont">
			<view v-for="(item,index) in tabArr" @click="handleTab(item.bcid)" class="flex align-center justify-around">
				<view class="">
					{{item.bname}}
				</view>
				<view v-if="index<3">
					<u-line direction="col" length="15" color="red"></u-line>
				</view>
			</view>
		</view>
		<view class="cake-cont">
			<cake-item 
				v-for="(item,index) in cakelist" 
				:cake-data="item"
				:cake-idx="index"
			/>
		</view>
		<cart-pop></cart-pop>
	</view>
</template>

<script>
	import {cakeGet} from '../../api/cake.js'
	export default {
		data() {
			return {
				cakelist:[],
				tabArr:[
					{bname:'蛋糕',bcid:1},
					{bname:'面包',bcid:11},
					{bname:'小食',bcid:6},
					{bname:'配件',bcid:5},
				],
				bcid:1,
				p:0
			};
		},
		onLoad() {
			this.fetchData()
		},
		onReachBottom() {
			console.log('触底了');
			this.fetchData()
		},
		onPullDownRefresh() {
			this.p=0
			this.cakelist = []
			this.fetchData()
		},
		methods: {
			handleTab(bcid) {
				this.bcid = bcid
				this.p=0
				this.cakelist = []
				this.fetchData()
			},
			fetchData(){
				let {bcid,p} = this
				uni.showLoading()
				cakeGet(bcid,p).then(res=>{
					console.log(res);
					uni.stopPullDownRefresh() //关闭下拉刷新动画
					uni.hideLoading()
					let {results} = res.data
					if(results.length){
						this.cakelist = [
							...this.cakelist,
							...results
						]
						this.p++
						return
					}
					uni.showToast({
						title:'我是有底线的~',
						icon:'none'
					})
				})
			}
		},
	}
</script>

<style lang="scss">
	.tab-cont>view{
		// border: 1px solid red;
		width: 25%;
	}
	page{
		padding-top: 100upx;
	}
	/* #ifdef MP-WEIXIN */
	page{
		padding-top: 140upx;
	}
	/* #endif */
	.cake-item {
		width: 350upx;
		margin-bottom: 20upx;
		margin-right: 20upx;
		image {
			width: 350upx;
			height: 350upx;
		}
	}
</style>
